<%--
  Created by IntelliJ IDEA.
  User: maliangcheng
  Date: 2020/8/15
  Time: 22:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@include file="head.jsp"%>
<html>
<head>
    <title>goods</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/resource/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.js"></script>
</head>
<body>
<div style=" background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-icon-align,layui-card-body" style="height: 200px;margin-top: 20px">
                    <div>
                        <i class="layui-icon layui-icon-search" style="font-size:30px;margin-left: 30px;margin-inside: 20px"></i>
                        <span>筛选搜索</span>

                    </div>
                    <div style="margin-top: 15px">
                        <form class="layui-form" action="${pageContext.request.contextPath}/goods/queryGoods" method="post">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label" style="width: 100px">输入搜索</label>
                                    <div class="layui-input-inline">
                                        <input placeholder="请输入商品编号" type="text" name="goodsId" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label" style="width: 100px">商品名称</label>
                                    <div class="layui-input-inline">
                                        <input placeholder="请输入商品名称" type="text" name="goodsName" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label" style="width: 100px">商品分类</label>
                                    <div class="layui-input-inline">
                                        <input placeholder="请输入商品类别" type="text" name="goodsType" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label" style="width: 100px">商品品牌</label>
                                    <div class="layui-input-inline">
                                        <input placeholder="请输入商品品牌" type="text" name="goodsManufacturer" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <span style="color: #FD482C">${msg}</span>
                                <a class="layui-btn" href="${pageContext.request.contextPath}/goods/getGoods" style="float: right;margin-right: 30px;margin-top: 20px">查询全部</a>
                                <button type="submit" class="layui-btn" style="float: right;margin-right: 30px;margin-top: 20px">搜索</button>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<div style=" background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-icon-align,layui-card-header" style="height: 50px;margin-top: 20px">
                    <i class="layui-icon layui-icon-form" style="font-size:30px;margin-left: 30px;margin-inside: 20px"></i>
                    数据列表
                    <a href="${pageContext.request.contextPath}/goods/toAddGoods" class="layui-btn layui-btn-primary" style="float: right;margin-right: 20px;margin-top: 5px">添加</a>
                </div>
            </div>
        </div>
    </div>
</div>
<table class="layui-table" lay-data="{align:'center',height:330, url:'', page:true, id:'idTest'}" >
    <thead>
    <tr>
        <th lay-data="{field:'goodsId', width:150, sort: true, fixed: true}">商品编号</th>
        <th lay-data="{field:'goodsName', width:150}">商品名称</th>
        <th lay-data="{field:'goodsType', width:150, sort: true}">商品类型</th>
        <th lay-data="{field:'goodsUnit', width:150}">商品单价</th>
        <th lay-data="{field:'goodsManufacturer', width:160}">品牌</th>
        <th lay-data="{field:'goodsInventory', width:150, sort: true}">库存</th>
        <th lay-data="{field:'tool',fixed: 'right', align:'center',sort: true}">操作</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach var="good" items="${list}">
        <tr>
            <td>${good.goodsId}</td>
            <td>${good.goodsName}</td>
            <td>${good.goodsType}</td>
            <td>${good.goodsUnit}</td>
            <td>${good.goodsManufacturer}</td>
            <td>${good.goodsInventory}</td>
            <td>
                <a class="layui-btn layui-btn-primary layui-btn-xs" >查看</a>
                <a class="layui-btn layui-btn-xs" href="${pageContext.request.contextPath}/goods/toUpdateGoods?goodsId=${good.getGoodsId()}">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" href="${pageContext.request.contextPath}/goods/del/${good.getGoodsId()}">删除</a>
            </td>
        </tr>
    </c:forEach>
    </tbody>
</table>

<script src="/resource/layui/layui.js" charset="utf-8"></script>
<script src="../js/goods.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });

        var $ = layui.$, active = {
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            ,getCheckLength: function(){ //获取选中数目
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
            }
            ,isAll: function(){ //验证是否全选
                var checkStatus = table.checkStatus('idTest');
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

</body>
</html>
